/* [atom-style css class] */

/*========layout========*/

/*====flex====*/

.border_box {
      box-sizing: border-box;
}

.content_box {
      box-sizing: content-box;
}

.flex {
      display: flex;
}

.flex_row {
      flex-direction: row;
}

.flex_row_reverse {
      flex-direction: row-reverse;
}

.flex_column {
      flex-direction: column;
}

.flex_column_reverse {
      flex-direction: column-reverse;
}

.flex_wrap {
      flex-wrap: wrap;
}

.flex_nowrap {
      flex-wrap: nowrap;
}

.flex_wrap_reverse {
      flex-wrap: wrap-reverse;
}

.justify_center {
      justify-content: center;
}

.justify_start {
      justify-content: flex-start;
}

.justify_end {
      justify-content: flex-end;
}

.justify_between {
      justify-content: space-between;
}

.justify_around {
      justify-content: space-around;
}

.justify_evenly {
      justify-content: space-evenly;
}

.justify_initial {
      justify-content: initial;
}

.align_center {
      align-items: center;
}

.align_start {
      align-items: flex-start;
}

.align_end {
      align-items: flex-end;
}

.align_stretch {
      align-items: stretch;
}

.align_baseline {
      align-items: baseline;
}

.align_initial {
      align-items: initial;
}

.webkit_box {
      display: -webkit-box;
}

.line_clamp_1 {
      -webkit-line-clamp: 1;
}

.line_clamp_2 {
      -webkit-line-clamp: 2;
}

.line_clamp_3 {
      -webkit-line-clamp: 3;
}

.line_clamp_4 {
      -webkit-line-clamp: 4;
}

.line_clamp_5 {
      -webkit-line-clamp: 5;
}

.box_horizontal {
      -webkit-box-orient: horizontal;
}

.box_vertical {
      -webkit-box-orient: vertical;
}

/*====flex====*/

/*====float====*/

.left {
      float: left;
}

.right {
      float: right;
}

.clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
}

.clearfix {
      display: inline-table;
}

.clearfix {
      *zoom: 1;
}

/*====float====*/

/*====position====*/

.margin_center {
      margin: auto;
}

.margin_xcenter {
      margin: 0 auto;
}

.margin_ycenter {
      margin: auto 0;
}

.text_center {
      text-align: center;
}

.text_left {
      text-align: left;
}

.text_right {
      text-align: right;
}

.text_justify {
      text-align: justify;
}

.text_last_center {
      text-align: center;
}

.text_last_left {
      text-align: left;
}

.text_last_right {
      text-align: right;
}

.text_last_justify {
      text-align: justify;
}

.absolute {
      position: absolute;
}

.relative {
      position: relative;
}

.fixed {
      position: fixed;
}

.static {
      position: static;
}

.sticky {
      position: sticky;
}

.top_0 {
      top: 0;
}

.left_0 {
      left: 0;
}

.right_0 {
      right: 0;
}

.bottom_0 {
      bottom: 0;
}

/*====position====*/

/*====display====*/

.none {
      display: none;
}

.block {
      display: block;
}

.inline {
      display: inline;
}

.inline_block {
      display: inline-block;
}

.list_item {
      display: list-item;
}

.border_1 {
      border-width: 1px;
}

.border_2 {
      border-width: 2px;
}

.border_solid {
      border-style: solid;
}

.border_dotted {
      border-style: dotted;
}

.radius_0 {
      border-radius: 0px;
}

.radius_4 {
      border-radius: 4px;
}

.radius_10 {
      border-radius: 10px;
}

.radius_100 {
      border-radius: 100px;
}

.border_normal_black {
      border: 1px solid black;
}

.border_normal_333 {
      border: 1px solid #333;
}

.border_normal_888 {
      border: 1px solid #888;
}

.border_bold_black {
      border: 4px solid black;
}

.border_bold_333 {
      border: 4px solid #333;
}

.border_bold_888 {
      border: 4px solid #888;
}

.border_normal_white {
      border: 1px solid white;
}

.border_normal_whitesmoke {
      border: 1px solid whitesmoke;
}

.border_normal_eee {
      border: 1px solid #eee;
}

.border_bold_white {
      border: 4px solid white;
}

.border_bold_whitesmoke {
      border: 4px solid whitesmoke;
}

.border_bold_eee {
      border: 4px solid #eee;
}

.border_none {
      border: none;
}

.transition_linear_normal {
      transition: all 0.3s linear;
}

.transition_linear_slow {
      transition: all 0.8s linear;
}

.transition_ease_normal {
      transition: all 0.3s ease;
}

.transition_ease_slow {
      transition: all 0.8s ease;
}

.rotate_30 {
      transform: rotate(30deg)
}

.rotate_60 {
      transform: rotate(60deg)
}

.rotate_90 {
      transform: rotate(90deg)
}

.rotate_180 {
      transform: rotate(180deg)
}

.rotatex_30 {
      transform: rotateX(30deg)
}

.rotatex_60 {
      transform: rotateX(60deg)
}

.rotatex_90 {
      transform: rotateX(90deg)
}

.rotatex_180 {
      transform: rotateX(180deg)
}

.rotatey_30 {
      transform: rotateY(30deg)
}

.rotatey_60 {
      transform: rotateY(60deg)
}

.rotatey_90 {
      transform: rotateY(90deg)
}

.rotatey_180 {
      transform: rotateY(180deg)
}

.rotatez_30 {
      transform: rotateZ(30deg)
}

.rotatez_60 {
      transform: rotateZ(60deg)
}

.rotatez_90 {
      transform: rotateZ(90deg)
}

.rotatez_180 {
      transform: rotateZ(180deg)
}

.scale_05 {
      transform: scale(0.5)
}

.scale_08 {
      transform: scale(0.8)
}

.scale_12 {
      transform: scale(1.2)
}

.scale_15 {
      transform: scale(1.5)
}

.scale_20 {
      transform: scale(2.0)
}

.scalex_05 {
      transform: scaleX(0.5)
}

.scalex_08 {
      transform: scaleX(0.8)
}

.scalex_12 {
      transform: scaleX(1.2)
}

.scalex_15 {
      transform: scaleX(1.5)
}

.scalex_20 {
      transform: scaleX(2.0)
}

.scaley_05 {
      transform: scaleY(0.5)
}

.scaley_08 {
      transform: scaleY(0.8)
}

.scaley_12 {
      transform: scaleY(1.2)
}

.scaley_15 {
      transform: scaleY(1.5)
}

.scaley_20 {
      transform: scaleY(2.0)
}

.skew_45 {
      transform: skew(45deg, 45deg)
}

.skewx_45 {
      transform: skewX(45deg)
}

.skewy_45 {
      transform: skewY(45deg)
}

.translate_2 {
      transform: translate(2px, 2px)
}

.translate_4 {
      transform: translate(4px, 4px)
}

.translate_8 {
      transform: translate(8px, 8px)
}

.translate_10 {
      transform: translate(10px, 10px)
}

.translate_20 {
      transform: translate(20px, 20px)
}

.translate_40 {
      transform: translate(40px, 40px)
}

.translatex_2 {
      transform: translateX(2px, 2px)
}

.translatex_4 {
      transform: translateX(4px, 4px)
}

.translatex_8 {
      transform: translateX(8px, 8px)
}

.translatex_10 {
      transform: translateX(10px, 10px)
}

.translatex_20 {
      transform: translateX(20px, 20px)
}

.translatex_40 {
      transform: translateX(40px, 40px)
}

.translatey_2 {
      transform: translateY(2px, 2px)
}

.translatey_4 {
      transform: translateY(4px, 4px)
}

.translatey_8 {
      transform: translateY(8px, 8px)
}

.translatey_10 {
      transform: translateY(10px, 10px)
}

.translatey_20 {
      transform: translateY(20px, 20px)
}

.translatey_40 {
      transform: translateY(40px, 40px)
}

.perspective_30 {
      perspective: 30px;
}

.perspective_60 {
      perspective: 30px;
}

.perspective_90 {
      perspective: 30px;
}

.perspective_120 {
      perspective: 30px;
}

.transform_origin_center {
      transform-origin: center center;
}

.transform_originx_left {
      transform-origin: left;
}

.transform_originx_right {
      transform-origin: right;
}

.transform_originx_center {
      transform-origin: center;
}

.transform_originy_top {
      transform-origin: 0 top;
}

.transform_originy_bottom {
      transform-origin: 0 bottom;
}

.transform_originy_center {
      transform-origin: 0 center;
}

.space_nowrap {
      white-space: nowrap;
}

.space_normal {
      white-space: normal;
}

.text_overflow_clip {
      text-overflow: clip;
}

.text_overflow_ellipsis {
      text-overflow: ellipsis;
}

/*====display====*/

/*====interval====*/

.overflow_visible {
      overflow: visible;
}

.overflow_hidden {
      overflow: hidden;
}

.overflow_xhidden {
      overflow-x: hidden;
}

.overflow_yhidden {
      overflow-y: hidden;
}

.w_100 {
      width: 100%;
}

.h_100 {
      height: 100%;
}

.w_100vw {
      width: 100vw;
}

.h_100vh {
      height: 100vh;
}

.m_0 {
      margin: 0px;
}

.m_2 {
      margin: 2px;
}

.m_4 {
      margin: 4px;
}

.m_6 {
      margin: 6px;
}

.m_8 {
      margin: 8px;
}

.m_10 {
      margin: 10px;
}

.m_12 {
      margin: 12px;
}

.m_14 {
      margin: 14px;
}

.m_16 {
      margin: 16px;
}

.m_18 {
      margin: 18px;
}

.m_20 {
      margin: 20px;
}

.mt_0 {
      margin-top: 0px;
}

.mt_2 {
      margin-top: 2px;
}

.mt_4 {
      margin-top: 4px;
}

.mt_6 {
      margin-top: 6px;
}

.mt_8 {
      margin-top: 8px;
}

.mt_10 {
      margin-top: 10px;
}

.mt_12 {
      margin-top: 12px;
}

.mt_14 {
      margin-top: 14px;
}

.mt_16 {
      margin-top: 16px;
}

.mt_18 {
      margin-top: 18px;
}

.mt_20 {
      margin-top: 20px;
}

.mb_0 {
      margin-bottom: 0px;
}

.mb_2 {
      margin-bottom: 2px;
}

.mb_4 {
      margin-bottom: 4px;
}

.mb_6 {
      margin-bottom: 6px;
}

.mb_8 {
      margin-bottom: 8px;
}

.mb_10 {
      margin-bottom: 10px;
}

.mb_12 {
      margin-bottom: 12px;
}

.mb_14 {
      margin-bottom: 14px;
}

.mb_16 {
      margin-bottom: 16px;
}

.mb_18 {
      margin-bottom: 18px;
}

.mb_20 {
      margin-bottom: 20px;
}

.ml_0 {
      margin-left: 0px;
}

.ml_2 {
      margin-left: 2px;
}

.ml_4 {
      margin-left: 4px;
}

.ml_6 {
      margin-left: 6px;
}

.ml_8 {
      margin-left: 8px;
}

.ml_10 {
      margin-left: 10px;
}

.ml_12 {
      margin-left: 12px;
}

.ml_14 {
      margin-left: 14px;
}

.ml_16 {
      margin-left: 16px;
}

.ml_18 {
      margin-left: 18px;
}

.ml_20 {
      margin-left: 20px;
}

.mr_0 {
      margin-right: 0px;
}

.mr_2 {
      margin-right: 2px;
}

.mr_4 {
      margin-right: 4px;
}

.mr_6 {
      margin-right: 6px;
}

.mr_8 {
      margin-right: 8px;
}

.mr_10 {
      margin-right: 10px;
}

.mr_12 {
      margin-right: 12px;
}

.mr_14 {
      margin-right: 14px;
}

.mr_16 {
      margin-right: 16px;
}

.mr_18 {
      margin-right: 18px;
}

.mr_20 {
      margin-right: 20px;
}

.p_0 {
      padding: 0px;
}

.p_2 {
      padding: 2px;
}

.p_4 {
      padding: 4px;
}

.p_6 {
      padding: 6px;
}

.p_8 {
      padding: 8px;
}

.p_10 {
      padding: 10px;
}

.p_12 {
      padding: 12px;
}

.p_14 {
      padding: 14px;
}

.p_16 {
      padding: 16px;
}

.p_18 {
      padding: 18px;
}

.p_20 {
      padding: 20px;
}

.pt_0 {
      padding-top: 0px;
}

.pt_2 {
      padding-top: 2px;
}

.pt_4 {
      padding-top: 4px;
}

.pt_6 {
      padding-top: 6px;
}

.pt_8 {
      padding-top: 8px;
}

.pt_10 {
      padding-top: 10px;
}

.pt_12 {
      padding-top: 12px;
}

.pt_14 {
      padding-top: 14px;
}

.pt_16 {
      padding-top: 16px;
}

.pt_18 {
      padding-top: 18px;
}

.pt_20 {
      padding-top: 20px;
}

.pb_0 {
      padding-bottom: 0px;
}

.pb_2 {
      padding-bottom: 2px;
}

.pb_4 {
      padding-bottom: 4px;
}

.pb_6 {
      padding-bottom: 6px;
}

.pb_8 {
      padding-bottom: 8px;
}

.pb_10 {
      padding-bottom: 10px;
}

.pb_12 {
      padding-bottom: 12px;
}

.pb_14 {
      padding-bottom: 14px;
}

.pb_16 {
      padding-bottom: 16px;
}

.pb_18 {
      padding-bottom: 18px;
}

.pb_20 {
      padding-bottom: 20px;
}

.pl_0 {
      padding-left: 0px;
}

.pl_2 {
      padding-left: 2px;
}

.pl_4 {
      padding-left: 4px;
}

.pl_6 {
      padding-left: 6px;
}

.pl_8 {
      padding-left: 8px;
}

.pl_10 {
      padding-left: 10px;
}

.pl_12 {
      padding-left: 12px;
}

.pl_14 {
      padding-left: 14px;
}

.pl_16 {
      padding-left: 16px;
}

.pl_18 {
      padding-left: 18px;
}

.pl_20 {
      padding-left: 20px;
}

.pr_0 {
      padding-right: 0px;
}

.pr_2 {
      padding-right: 2px;
}

.pr_4 {
      padding-right: 4px;
}

.pr_6 {
      padding-right: 6px;
}

.pr_8 {
      padding-right: 8px;
}

.pr_10 {
      padding-right: 10px;
}

.pr_12 {
      padding-right: 12px;
}

.pr_14 {
      padding-right: 14px;
}

.pr_16 {
      padding-right: 16px;
}

.pr_18 {
      padding-right: 18px;
}

.pr_20 {
      padding-right: 20px;
}

/*====interval====*/

/*========layout========*/

/*========color========*/

.shadow_normal {
      box-shadow: 0px 0px 10px #eee;
}

.shadow_medium {
      box-shadow: 0px 0px 10px #ccc;
}

.shadow_high {
      box-shadow: 0px 0px 10px #aaa;
}

.white {
      color: white;
}

.whitesmoke {
      color: #fafafa;
}

.white_sub {
      color: #E1E3E6;
}

.black {
      color: black;
}

.color_333 {
      color: #333;
}

.color_888 {
      color: #888;
}

.black_sub {
      color: #8A9099;
}

.bg_red {
      background: red;
}

.bg_blue {
      background: blue;
}

.bg_green {
      background: green;
}

.bg_orange {
      background: orange;
}

.border_red {
      border-color: red;
}

.border_blue {
      border-color: blue;
}

.border_green {
      border-color: green;
}

.border_orange {
      border-color: orange;
}

.red {
      color: red;
}

.blue {
      color: blue;
}

.green {
      color: green;
}

.orange {
      color: orange;
}

.bg_white {
      background-color: white;
}

.bg_whitesmoke {
      background-color: #fafafa;
}

.bg_black {
      background-color: black;
}

.bg_333 {
      background-color: #333;
}

/*========color========*/

/*========font========*/

.font_normal {
      font-weight: normal;
}

.font_bold {
      font-weight: bold;
}

.font_bolder {
      font-weight: bolder;
}

.fontsize_12 {
      font-size: 12px;
}

.fontsize_14 {
      font-size: 14px;
}

.fontsize_16 {
      font-size: 16px;
}

.fontsize_18 {
      font-size: 18px;
}

.fontsize_20 {
      font-size: 20px;
}

.fontsize_24 {
      font-size: 24px;
}

.fontsize_32 {
      font-size: 32px;
}

.fontsize_64 {
      font-size: 72px;
}

.fontsize_128 {
      font-size: 128px;
}

.fontfamily_simhei {
      font-family: simhei;
}

.fontfamily_simsun {
      font-family: simsun;
}

.fontfamily_nsimsun {
      font-family: nsimsun;
}

.fontfamily_fangsong {
      font-family: fangsong;
}

.fontfamily_kaiti {
      font-family: kaiti;
}

.fontfamily_yahei {
      font-family: microsoft yahei;
}

.fontfamily_lisu {
      font-family: lisu;
}

.fontfamily_pingfang {
      font-family: pingfang sc;
}

.fontfamily_stheiti {
      font-family: stheiti;
}

.letter_spacing_1 {
      letter-spacing: 1px;
}

.cursor_point {
      cursor: pointer;
}

/*========font========*/

/*========value & modules========*/

:host {
      --color_level1: #000;
      --color_level2: #333;
      --color_level3: #666;
      --color_level4: #888;
      --color_level5: #bbb;
      --color_level6: #eee;
}

/*========button========*/

.atom_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px 40px;
      font-size: 16px;
      line-height: 16px;
      letter-spacing: 1px;
      transition: all ease 0.3s;
      outline: none;
      box-sizing: border-box;
}

.atom_btn:hover {
      border-radius: 100px;
}

/*========button========*/

/*========value & modules========*/

/* [atom-style css class] */